<template>
	<div class="safe">
		<list-title :data="header"></list-title>
		<div class="info">
			<div class="headimg">
				<div class="avatar">
					<span class="el-icon-loading" v-if='!avatar'></span>
					<img :src="'/static/image/avatar/' + avatar" v-if="avatar">
				</div>
				<el-button type='text' size="mini" @click="avatarDialogVisible = true">修改头像</el-button>
			</div>
			<div class="acount">
				<ul>
					<li>登录账号：{{ username }}（<span class="orange">您一共登录系统{{ logintimes }}次</span>）</li>
					<li>角色：{{ role }}</li>
					<li>创建者：{{ creater }}</li>
					<li>注册时间：{{ add_time }}</li>
				</ul>
			</div>
		</div>
		<div class="modify">
			<ul>
				<li>
					<div class="title">修改密码</div>
					<div class="desc">安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码。</div>
					<div class="operation">
						<el-button type='text' size="mini" @click="pwdDialogVisible = true">修改</el-button>
					</div>
				</li>
			</ul>
		</div>
		<!-- 修改头像 -->
		<el-dialog title="修改头像" :visible.sync="avatarDialogVisible" :close-on-click-modal="false" width="578px">
			<span>从个性头像库里选择一张图片作为头像</span>
			<div class="modify-avatar">
				<ul class="avatars">
					<li v-for="(item, index) in avatar_list" :key="index"><img :src="'/static/image/avatar/' + item" @click="chooseAvatar(item)"></li>
				</ul>
				<div class="curr-avatar">
					<img :src="'/static/image/avatar/' + showavatar">
					<div>头像预览</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
			<el-button @click="avatarDialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="modifyAvatar()" :disabled='modifyAvatarLock'>
				确 定 <span class="el-icon-loading" v-if='modifyAvatarLock'></span>
			</el-button>
			</span>
		</el-dialog>
		<!-- 修改密码 -->
		<el-dialog title="修改密码" :visible.sync="pwdDialogVisible" :close-on-click-modal="false" width="480px">
			<el-form :model="modpwdForm" :rules="rules" ref="modpwdForm" label-width="100px">
				<el-form-item label="旧密码" prop="data.oldpassword" style="width: 378px;">
					<el-input type="password" v-model="modpwdForm.data.oldpassword" placeholder="旧密码"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="data.password" style="width: 378px;">
					<el-input type="password" v-model="modpwdForm.data.password" placeholder="新密码"></el-input>
				</el-form-item>
				<el-form-item label="确认新密码" prop="data.passwordConfirm" style="width: 378px;">
					<el-input type="password" v-model="modpwdForm.data.passwordConfirm" placeholder="确认新密码"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
			<el-button @click="pwdDialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="modifyPassword('modpwdForm')" :disabled='modifyAvatarLock'>
				确 定 <span class="el-icon-loading" v-if='modifyAvatarLock'></span>
			</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.modpwdForm.password !== '') {
					this.$refs.modpwdForm.validateField('password');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.modpwdForm.data.password) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			/*头部数据*/
			header: {
				title: '安全设置',
				reload: false,
			},
			avatar: 'default_handsome.jpg',//当前头像
			showavatar: '',//预览头像
			username: '',
			role: '',
			creater: '',
			add_time: '',
			logintimes: '',
			avatarDialogVisible: false,
			pwdDialogVisible: false,
			/*头像列表*/
			avatar_list: [
				'default_beauty.jpg',
				'default_colleagues.jpg',
				'default_family.jpg',
				'default_friend.jpg',
				'default_handsome.jpg',
				'default_trade.jpg',
			],
			modifyAvatarLock: false,
			/*修改密码*/
			modpwdForm: {
				submitLock: false,
				data: {
					oldpassword: '',
					password: '',
					passwordConfirm: '',
				}
			},
			rules: {
				data: {
					oldpassword: [
						{ required: true, message: '请输入旧密码', trigger: 'blur' },
						{ min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' },
					],
					password: [
						{ required: true, message: '请输入新密码', trigger: 'blur' },
						{ validator: validatePass, trigger: 'blur' }
					],
					passwordConfirm: [
						{ required: true, message: '请再次输入新密码', trigger: 'blur' },
						{ validator: validatePass2, trigger: 'blur' }
					],
				}
			}
		};
	},
	components: {
		ListTitle
	},
	created: function() {
		let getAvatar;
		if(getAvatar = JSON.parse(this.$localstorage.get('uinfo')).avatar){
			this.avatar = getAvatar
		}
		this.showavatar = this.avatar
		/*获取个人信息*/
		this.getInfo()
	},
	methods: {
		/*获取个人信息*/
		getInfo() {
			this.$baseURL(this.$domain.ac)
			this.$get(this.$api.acountInfo).then(res => {
				if(res.data.code === 0){
					if(res.data.data != undefined){
						// console.log(res.data.data)
						this.username = res.data.data['username']
						// this.avatar = res.data.data['avatar']?res.data.data['avatar']:'default_beauty.jpg'
						this.role = '超级管理员'
						this.creater = res.data.data['creater']
						this.add_time = res.data.data['add_time']
						this.logintimes = res.data.data['logintimes']
					}
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*点击选择头像*/
		chooseAvatar(avatar) {
			this.showavatar = avatar
		},
		/*修改头像*/
		modifyAvatar() {
			if(!this.modifyAvatarLock){
				this.modifyAvatarLock = true;
				this.$baseURL(this.$domain.ac)
				this.$post(this.$api.modifyAcountInfo, {
					Admin: {avatar: this.showavatar}
				}).then(res => {
					// console.log(res);
					/*成功*/
					if(res.data.code == 0){
						let tmpUinfo = JSON.parse(this.$localstorage.get('uinfo'))
						tmpUinfo.avatar = this.showavatar
						this.$localstorage.set('uinfo', JSON.stringify(tmpUinfo));//更改登录信息中的头像
						this.avatar = this.showavatar

						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
						this.avatarDialogVisible = false
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
					this.modifyAvatarLock = false;
				});
			}
		},
		/*修改密码*/
		modifyPassword(formName) {
			if(!this.modpwdForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.modpwdForm.submitLock = true;

						this.$baseURL(this.$domain.ac)
						this.$post(this.$api.modifyAcountInfo, {
							Admin: this.modpwdForm.data
						}).then(res => {
							// console.log(res);
							/*成功*/
							if(res.data.code == 0){
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'success'
								});
								this.pwdDialogVisible = false
							}else{
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'error'
								});
							}
							this.modpwdForm.submitLock = false;
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
	},
	computed: {
	
	}
};
</script>

<style lang="stylus" scoped>
.safe
	.info
		// background: red
		display: flex
		height: 160px
		overflow: hidden
		box-sizing: border-box
		margin-top: 20px
		border-bottom: 1px solid #eee;
		.headimg
			width: 120px
			margin-right: 30px
			text-align: center
			.avatar
				width: 100%
				height: 120px
				span
					margin-top: 50px
				img
					width: 100%
					border-radius: 10px
		.acount
			flex: 1
			ul
				li
					line-height: 30px
	.modify
		ul
			li
				display: flex
				border-bottom: 1px dashed #eee;
				padding: 30px 0
				.title
					width: 150px
					text-align: center
					line-height: 28px
				.desc
					flex: 1
					line-height: 28px
				.operation
					width: 100px
					text-align: center
	.modify-avatar
		margin-top: 20px
		display: flex
		.avatars
			border: 1px solid #DCDFE6
			box-sizing: border-box
			width: 398px
			height: 140px
			overflow: auto
			padding: 19px
			font-size: 0
			li
				float: left
				margin: 0 20px 20px 0
				img
					width: 100px
					cursor: pointer
			li:nth-child(3n)
				margin-right: 0px
			li:nth-child(n+3)
				margin-bottom: 0px
	.curr-avatar
		margin-left: 22px
		img
			width: 110px
		div
			text-align: center
			line-height: 24px
				
</style>